<!-- 发文（函）公文详情-->
<template>
  <view>
    <van-collapse v-model="tableShow" accordion :border="border"
                  style="word-break: break-word !important;">
      <van-collapse-item title="基本信息" title-class="text-bold"  name="jbxx">
        <template #title>
          <view :class="tableShow == 'jbxx' ? 'content-blue':''">
            <i class="van-icon van-icon-label-o van-cell__left-icon"></i>
            <span class="van-cell__title text-bold">
              基本信息
            </span>
          </view>
        </template>
        <van-cell-group :border="border" v-if="detailObj1.detailObj != null">
          <van-row class="content-border">
            <van-col span="8" class="content-title">标题</van-col>
            <van-col span="16" class="content-value">{{detailObj1.detailObj.title}}</van-col>
          </van-row>
          <van-row class="content-border">
            <van-col span="8" class="content-title">发电字号</van-col>
            <van-col span="16" class="content-value">{{detailObj1.detailObj.fdWord}}</van-col>
          </van-row>
          <van-row class="content-border">
            <van-col span="8" class="content-title">呈送领导</van-col>
            <van-col span="16" class="content-value">{{detailObj1.detailObj.csldToName}}</van-col>
          </van-row>
          <van-row class="content-border">
            <van-col span="8" class="content-title">紧急程度</van-col>
            <van-col span="16" class="content-value content-red" v-if="this.util.isNotEmpty(detailObj1.detailObj.emergencyLevel) && detailObj1.detailObj.emergencyLevel != 'pj'">
              <i class="iconfont icon-dian"></i>{{this.dict.getDictNameByDictCode('dbjjcd',detailObj1.detailObj.emergencyLevel)}}
            </van-col>
            <van-col span="16" class="content-value" v-else>
              {{this.dict.getDictNameByDictCode('dbjjcd',detailObj1.detailObj.emergencyLevel)}}
            </van-col>
          </van-row>
          <van-row class="content-border">
            <van-col span="8" class="content-title">发往</van-col>
            <van-col span="16" class="content-value">{{detailObj1.detailObj.mainToName}}</van-col>
          </van-row>
          <van-row class="content-border">
            <van-col span="8" class="content-title">抄送</van-col>
            <van-col span="16" class="content-value">{{detailObj1.detailObj.copyToName}}</van-col>
          </van-row>
          <van-row class="content-border">
            <van-col span="8" class="content-title">备注</van-col>
            <van-col span="16" class="content-value">{{detailObj1.detailObj.remark}}</van-col>
          </van-row>
        </van-cell-group>
      </van-collapse-item>
      <van-collapse-item title="正文及附件" title-class="text-bold" name="zwjfj">
        <template #title>
          <view :class="tableShow == 'zwjfj' ? 'content-blue':''">
            <i class="van-icon van-icon-font-o van-cell__left-icon"></i>
            <span class="van-cell__title text-bold">
              正文及附件
            </span>
          </view>
        </template>
        <!-- TODO 正文需要插件显示 -->
        <view class="opinion" v-if="detailObj1.detailBody !=null">
          <text class="opinion-left">正文</text>
          <view class="opinion-right">
            <view v-for="item in detailObj1.detailBody.all" @click="lx.openFile(item,detailObj1.detailObj.annexId)">{{item.attachName}}</view>
          </view>
        </view>
        <view class="opinion" v-if="detailObj1.detailAttachment != undefined &&detailObj1.detailAttachment.length>0 ">
          <text class="opinion-left">附件</text>
          <view class="opinion-right">
            <view v-for="(item,index) in detailObj1.detailAttachment" @click="lx.openFile(item,detailObj1.detailObj.annexId)">
              <text class="text-blue">{{ item.attachName }}</text>
            </view>
          </view>
        </view>
      </van-collapse-item>
      <van-collapse-item title="意见" title-class="text-bold" name="yj">
        <template #title>
          <view :class="tableShow == 'yj' ? 'content-blue':''">
            <i class="van-icon van-icon-comment-o van-cell__left-icon"></i>
            <span class="van-cell__title text-bold">
              意见
            </span>
          </view>
        </template>
        <view v-if="detailObj1.opinion != null">
          <template v-for="(item,index) in reviewType">
            <view class="opinion"  v-if="detailObj1.opinion[item.dictItemCode] != undefined">
              <view class="opinion-title">{{item.dictItemName}}</view>
              <view class="opinion-box padding-left-sm" v-for="item in detailObj1.opinion[item.dictItemCode]">
<!--                <view class="opinion-left">{{item.parentDeptName}}</view>-->
                <view class="opinion-left">{{item.opinion}}</view>
                <view class="opinion-right">
                  <!-- base64签名图片 -->
                  <img v-if="item.signature!='' && item.signature != undefined" :src="`data:image/png;base64,`+item.signature" alt="图片未上传" />
                  <text v-else class="opinion-user">{{item.userName}}</text>
                  <text class="opinion-date">{{item.approvalTime}}</text>
                </view>
              </view>

            </view>
          </template>
        </view>
      </van-collapse-item>
      <!--公文分发功能-->
      <van-collapse-item v-if="showFenfaBtn" title="公文分发信息" title-class="text-bold" name="gwffxx">
        <template #title>
          <view :class="tableShow == 'gwffxx' ? 'content-blue':''">
            <i class="van-icon van-icon-share-o van-cell__left-icon"></i>
            <span class="van-cell__title text-bold">
                  公文分发信息
                </span>
          </view>
        </template>
        <van-row class="content-border">
          <van-col span="8" class="content-title">请选择分发人</van-col>
          <van-col span="16" class="content-value">
            <van-cell style="padding:0 !important;color: #969799" title="" :value="fenfaUserName" is-link
                      @click="showFenfa"/>
          </van-col>
        </van-row>
        <van-row class="content-border">
          <van-field style="min-width: 30% !important;" v-model="distributeInfo" center clearable rows="2" autosize
                     label="" type="textarea" placeholder="分发意见">
            <template #button>
              <van-button style="padding: 0 30rpx;!important;" size="mini" type="info" :disabled="!fenfaUserName"
                          @click="ditributetouser">分发
              </van-button>
              <van-button v-if="showYiyueBtn" style="padding: 0 26rpx;!important;" size="mini" type="info"
                          @click="updateDistributeStatus">已阅
              </van-button>
            </template>
          </van-field>
        </van-row>
        <view class="opinion">
          <view class="opinion-title">公文分发信息:</view>
          <view class="opinion-box padding-bottom" v-for="item in distributeProcess">
            <view class="opinion-left">分发过程:{{ item.distributeUserName }}--->{{
                item.receiveUserName
              }}({{ item.status == '0' ? '未阅' : '已阅:' + item.handleTime }})
            </view>
            <view class="opinion-left" v-if="item.distributeInfo">{{ item.distributeInfo }}</view>
            <view class="opinion-right">
              <text class="opinion-date">{{ item.distributeUserName }}</text>
              <text class="opinion-date">{{ item.distributeTime }}</text>
            </view>
          </view>
        </view>
      </van-collapse-item>
    </van-collapse>
  </view>
</template>

<script>
  export default {
    props:{
      detailObj1:{
        detailObj:Object,
        detailBody:Object,
        detailAttachment:Object,//附件
        opinion:Object,//意见
      },
      //列表中获取到的proInstId
      proInstId:{
        type:String,
        default: ''
      }

    },
    data() {
      return {
        border: false,
        loading: true,
        tableShow: "jbxx",
        message: '',
        reviewType:[],//意见类型
        proInstIdOld:'',
        showFenfaBtn:false,//是否显示分发功能
        distributeInfo:'',//分发信息
        fenfaUserName:'',//选中的要分发的用户名，多个用顿号分割
        fenfaUserId:'',//选中的要分发的用户id，多个用逗号分割
        distributeProcess:[],//已分发的信息列表
        showYiyueBtn:false,//是否显示已阅按钮
      };
    },
    watch: {
      proInstId: {
        handler(nval, oval) {
          if (nval != null) {
            this.proInstIdOld = nval
            this.isProcessClosed(this.proInstIdOld)
          }
        },
        immediate: true,
        deep: true
      }
    },
    mounted() {
      this.loading = false;
      this.reviewType = this.cache.get('reviewType')
      // this.dict.getDictItemName(this.cache.get(''),'')
    },
    methods: {
      //判断是否显示分发功能
      showFenfa() {
        this.$emit('showFenfaSheet')
      },
      //父组件调用，传选中的用户对象给子组件
      initParam(userInfo){
        this.fenfaUserName = userInfo.userName.join('、')
        this.fenfaUserId = userInfo.userId.join(',')
      },
      //判断是否显示分发功能-判断流程是否结束，如果结束显示分发功能
      isProcessClosed(proInstId) {
        this.$http({
          url: this.$http.adornUrl(`/caac/oa/distributedoc/doc/isProcessClosed`),
          method: 'get',
          params: {
            'systemKey': this.cache.get('userInfo').systemKey,
            'systemFlag': this.cache.get('userInfo').systemFlag,
            'proInstId':proInstId
          }
        }).then(({data}) => {
          //返回true 则说明流程已结束，显示分送按钮{"code":200,"data":true,"message":null}
          if (data.code == 200) {
            this.showFenfaBtn = data.data
            //如果true，再调用获取公文分发信息接口
            this.getDistributeProcess(proInstId)
          }
        })
      },
      //已阅按钮是否显示
      isShowYiyueBtn(proInstId){
        this.$http({
          url: this.$http.adornUrl(`/caac/oa/distributedoc/doc/getDistribute`),
          method: 'get',
          params: {
            'systemKey': this.cache.get('userInfo').systemKey,
            'systemFlag': this.cache.get('userInfo').systemFlag,
            'proInstId':proInstId
          }
        }).then(({data}) => {
          if (data.code == 200) {
            if(data.data.info.length>0){
              this.showYiyueBtn = true
            }else{
              this.showYiyueBtn = false
            }
          }
        })
      },
      //已阅
      updateDistributeStatus(){
        this.$http({
          url: this.$http.adornUrl(`/caac/oa/distributedoc/doc/updateDistributeStatus`),
          method: 'get',
          params: {
            'systemKey': this.cache.get('userInfo').systemKey,
            'systemFlag': this.cache.get('userInfo').systemFlag,
            'proInstId': this.proInstIdOld
          }
        }).then(({data}) => {
          if (data.code == 200) {
            this.$toast('操作成功')
            this.isShowYiyueBtn(this.proInstIdOld)
            this.getDistributeProcess(this.proInstIdOld)
          }else{
            this.$toast('已阅操作失败，错误码：'+data.code)
          }
        })
      },
//获取已分发信息
      getDistributeProcess(proInstId) {
        this.$http({
          url: this.$http.adornUrl(`/caac/oa/distributedoc/doc/getDistributeProcess`),
          method: 'get',
          params: {
            'systemKey': this.cache.get('userInfo').systemKey,
            'systemFlag': this.cache.get('userInfo').systemFlag,
            'proInstId':proInstId
          }
        }).then(({data}) => {
          if (data.code == 200) {
            this.distributeProcess = data.data.process
          }else{
            this.$toast('获取公文分发信息失败，错误码：'+data.code)
          }
        })
      },
      //分发给分发人
      ditributetouser(){
        this.$http({
          url: this.$http.adornUrl(`/caac/oa/distributedoc/doc/ditributetouser`),
          method: 'get',
          params: {
            'systemKey': this.cache.get('userInfo').systemKey,
            'systemFlag': this.cache.get('userInfo').systemFlag,
            'ids':this.fenfaUserId,
            'docType':this.detailObj1.detailObj.bizType,//文件类型
            'proInstId':this.proInstIdOld,
            'docId':this.detailObj1.detailObj.fdId,//文件id
            'title':this.detailObj1.detailObj.title,
            'distributeInfo':this.distributeInfo
          }
        }).then(({data}) => {
          if (data.code == 200) {
            this.$toast('分发成功')
            this.getDistributeProcess(this.proInstIdOld)
            this.distributeInfo=''
            this.fenfaUserId=''
            this.fenfaUserName=''
          }else{
            this.$toast('分发出错了，错误码：'+data.code)
          }
        })
      },
    },
  };
</script>

<style scoped>

  /* 意见相关样式 */
  .opinion{
    display: flex;
    flex-direction: column;
    margin: 0 32rpx;
    padding: 20rpx 0rpx;
    overflow: hidden;
    font-size: 28rpx;
    line-height: 24px;
    border-bottom: 1px solid #ebedf0;

  }
  .opinion .opinion-title{
    text-align: left;
    padding-bottom: 14rpx;
  }
  .opinion .opinion-box{
    margin-bottom: 20rpx;
  }
  .opinion .opinion-left{
    text-align: left;
    color: #323233;
  }
  .opinion .opinion-right{
    text-align: right;
    color: #969799;
  }
  .opinion .opinion-right .opinion-user{
    font-weight: 400;
    color: #000000;
  }
  .opinion .opinion-right .opinion-date{
    color: #323233;
    margin-left: 20rpx;
  }

  .van-cell__title {
    min-width: 50%;

  span {
    display: inline-block;
    text-align: left;
    word-break: break-all;
  }
  }

  /deep/ .van-collapse-item__content {
    padding: 0px;
    color: #969799;
    font-size: 14px;
    line-height: 1.5;
    background-color: #fff
  }

  /deep/ .content-border {
    border-bottom: 1rpx solid #e4e4e4;
    display: flex;
  }
  .content-title {
    background-color: #f2f2f2;
    padding: 10px 15px;
    color: #646566;
  }
  .content-value {
    padding: 10px 15px;
    text-align: right;
  }
  .content-red {
    color: #ed1c24;
  }
  .content-blue {
    color: #0081ff;
  }

</style>
